<!--  -->
<template>
  <div class="map_control"></div>
</template>

<script>
import gcoord from "gcoord";
export default {

  //加载控件-------------
  mounted() {

    //放大缩小控件
    const zoom = new L7.Zoom({
      position: "topright",
    });
    this.$scene.addControl(zoom);

    //全屏
    const fullscreen = new L7.Fullscreen({
      position: "topright",
    });
    this.$scene.addControl(fullscreen);

    //主题切换控件
    const mapTheme = new L7.MapTheme({});
    this.$scene.addControl(mapTheme);

    //定位
    const geoLocate = new L7.GeoLocate({
      transform: (position) => {
        // 将获取到基于 WGS84 地理坐标系 的坐标转成 GCJ02 坐标系
        return gcoord.transform(position, gcoord.WGS84, gcoord.GCJ02);
      },
    });
    this.$scene.addControl(geoLocate);

    //显示经纬度
    const mouseLocation = new L7.MouseLocation({
      transform: (position) => {
        return position;
      },
      position: "bottomright",
    });
    this.$scene.addControl(mouseLocation);

    //比例尺
    const scale = new L7.Scale({
      zoomInTitle: "放大",
      zoomOutTitle: "缩小",
      position: "bottomright",
    });
    this.$scene.addControl(scale);

  },
};
</script>

<style lang='scss' scoped>
.map_control{
  z-index: 1000000;
}
</style>